<template name="carService">
	<view :style="$s.view_color">
		<view class="place-order-car-service">
			<view class="header">
				<text class="t1">优惠选择</text>
			</view>
			<view class="inner">
				<view class="row arrow" @click="showList">
					<text class="icon-quan">券</text>
					<text class="label">优惠券抵扣</text>
					<view class="flex"></view>
					<text class="none" v-if="coupon_list.length===0">无优惠券可用</text>
					<text class="desc" v-else-if="coupon_money===0">请选择优惠券</text>
					<text class="amount red" v-else>-{{coupon_money}}元</text>
					
					<!-- <text class="coupon-tips">tips</text> -->
				</view>
	<!-- 			<view class="row">
					<text class="icon-quan free">免</text>
					<text class="label">title</text>
					<view class="flex"></view>
					<text class="amount red">0元</text>
				</view> -->
			</view>
		</view>
		<u-popup :show="list_switch" @close="list_switch=false" :closeable="true" mode="bottom" :round="10">
			<view class="pop-title">可用优惠券</view>
			<scroll-view class="pop-box coupon-list" scroll-x="false" scroll-y="true" @scrolltolower="loadMore">
				<u-checkbox-group v-model="couponid" shape="circle" placement="column" :activeColor="$s.theme" @change="changeCoupon">
					<block v-for="(item,index) in coupon_list" :key="index">
						<view class="coupon-com" :class="couponid.indexOf(item.id)!==-1?'select':''" @click="insCoupon(item.id)">
							<view class="coupon-com-main radio-coupon">
								<view class="coupon-com-main-left" v-if="item.discount_type===1">
									<text class="coupon-com-main-left-small">￥</text>
									<text class="coupon-com-main-left-strong">{{item.discount_money}}</text>
								</view>
								<view class="coupon-com-main-left" v-if="item.discount_type===2">
									<text class="coupon-com-main-left-strong">{{item.discount_rate}}</text>
									<text class="coupon-com-main-left-small">折</text>
								</view>
								<view class="tag">{{item.discount_type_name}}</view>
								<view class="coupon-com-main-right">
									<view class="coupon-com-main-right-name">{{item.title}}</view>
									<view class="coupon-com-main-right-des">{{item.discount_text}} ( {{item.is_over==1?'可叠加':'不可叠加'}} )</view>
									<view class="coupon-com-main-right-des">[ {{item.use_text}} ]</view>
									<view class="coupon-com-main-right-des">有效期：{{item.term_type_name}}</view>
								</view>
								<view class="coupon-com-main-right-ex1">
									<u-checkbox :name="item.id" size="24" iconSize="22"></u-checkbox>
								</view>
							</view>
							<view class="coupon-com-footer"></view>
						</view>
					</block>
					</u-checkbox-group>
				</block>
				<u-loadmore :status="page_status" :line="true"/>
			</scroll-view>
			<view class="pop-foot">
				<button class="my-but-primary" @click="submit()">确定使用</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import uPage from '@/common/page'
	import numberBox from '../../../uni_modules/uview-ui/libs/config/props/numberBox'
	export default {
		name: 'carService',
		props: {
			couponfee:{
				type:Number,
				default:0
			},
			p_couponid:{			//默认选中的单个id
				type:[Object,Array],
				default:[-1],
			},
			increment_item:{
				type:[Object,Array],
				default:[]
			},
			points:{
				type:[Number],
				default:0
			}
		},
		data() {
			return {
				coupon_id:[],
				coupon_money:0,
				list_switch:false,			//优惠券列表开关
				tips_pop:false,
				tips_title:'',
				tips_content:'',		
				couponid:[],				//默认选中优惠券的数组
				use_points:0,				//是否使用积分
				increment:[],				//增值服务
				page_status: "loadmore",
				coupon_list:[],
				page_data: {},         // 分页状态
			};
		},
		
		watch: {
			p_couponid:{
				handler (newVal) {
					this.couponid=newVal
				},
				deep: true,
				immediate: true,
			},
			// 实时更新积分
			points:{
				handler (newVal) {
					this.use_points=newVal
				},
				deep: true,
				immediate: true,
			}
		},
		computed: {
			...mapState({
				gain_info:state => state.$gainInfo,
				back_info:state => state.$backInfo,
				start_date:state => state.$startDate,
				end_date:state => state.$endDate,
				carid:state => state.$carID,
				config:state => state.$config,
				$s:state => state.$style,
				is_drive:state => state.$isDrive
			}),
			//优惠券优惠金额发生变化
			fee_chang(){
				this.coupon_money=this.couponfee
			},
			//增值服务发生改变
			increment_chang(){
				this.increment=this.increment_item;
			},
		},
		//首次运行加载
		mounted(){
			this.getList()
		},
		methods: {
			//弹出提示框
			showTips(title,content){
				this.tips_title=title
				this.tips_content=content
				this.tips_pop=true
			},
			// 打开列表选择
			showList(){
				this.list_switch=true
			},
			// 优惠券发生改变
			chang(item){
				// console.log(item)
				if(item.length<=0 || item==[-1]){			//没有选择优惠券
					this.coupon_id=[-1]
				}else{
					this.coupon_id=item
				}
			},
			// 确定优惠券
			submit(){
				if(this.coupon_id.length<=0 || this.coupon_id==[-1]){			//没有选择优惠券
					this.$u.toast('请选择优惠券')
					return false;
				}
				let post={
					car_id:this.carid,
					increment_item:this.increment,
					start_date:this.start_date.timestamp,
					end_date:this.end_date.timestamp,
					gain_type:this.gain_info.type,
					gain_address:this.gain_info.address,
					gain_lat:this.gain_info.lat,
					gain_lng:this.gain_info.lng,
					gain_store:this.gain_info.store,
					back_type:this.back_info.type,
					back_address:this.back_info.address,
					back_lat:this.back_info.lat,
					back_lng:this.back_info.lng,
					back_store:this.back_info.store,
					coupon_id:this.coupon_id.join(','),
					is_drive:this.is_drive,
					use_points:this.use_points,
				}
				this.$u.api.checkCoupon(post).then(res=>{
					this.list_switch=false
					this.$emit('couponCall',this.coupon_id)	
				});
			},
			//点击券
			changeCoupon(e){
				this.coupon_id=this.formatCoupon(e);
			},
			//选中插入优惠券ID
			insCoupon(id){
				let e=this.coupon_id;
				if(e.indexOf(id)!=-1){
					e.splice(e.indexOf(id),1)
				}else{
					e.push(id)
				}
				this.coupon_id=this.formatCoupon(e);
			},
			//格式化选择优惠券的数组
			formatCoupon(e){
				//数组中是 [-1,2] 的格式
				if(e.indexOf(-1)!=-1 && e.length>0){
					e.splice(e.indexOf(-1),1)
				}else if (e === '' || (Array.isArray(e) && e.length === 0) || (Array.isArray(e) && e.length === 1 && e[0] === -1)) {
					e=[-1]
				}
				return e;
			},
			getList(page = {}) {
				// 已加载全部则停止
				if (this.page_data.end) return
				
				// 显示加载状态
				this.page_status = 'loading'
				
				this.$u.api.couponUse({
					car_id: this.carid,
					page: page.number || 1  // 获取当前页码
				}).then(res => {
					// 合并数据
					this.coupon_list = this.coupon_list.concat(res.data.list)
					
					// 更新分页信息（使用uPage工具）
					this.page_data = uPage.setData(res.data)
					
					// 更新加载状态
					this.page_status = this.page_data.load
				}).catch(() => {
					this.page_status = 'loadmore'
				})
			},
			//加载更多
			loadMore(){
				this.getList(this.page_data)
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/coupon.css";
	.coupon-com{
		margin: 20rpx !important;
		margin-bottom:0rpx !important;;
	}
	.place-order-car-service {
	    display: block;
	    margin: 0 32rpx 32rpx;
	}
	
	.place-order-car-service .tabs {
	    height: 120rpx;
	    overflow: hidden;
	    background: #fff;
	    border-top-left-radius: 20rpx;
	    border-top-right-radius: 20rpx;
	}
	
	.place-order-car-service .header,.place-order-car-service .tabs,.place-order-car-service .tabs .item {
	    position: relative;
	    display: -ms-flexbox;
	    display: flex;
	}
	
	.place-order-car-service .tabs .item {
	    flex: 1;
	    -ms-flex-align: center;
	    align-items: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    width: 100%;
	    height: 80rpx;
	}
	
	.place-order-car-service .tabs .item .text {
	    font-size: 26rpx;
	}
	
	.place-order-car-service .tabs .item .line {
	    position: absolute;
	    bottom: 0;
	    left: 50%;
	    display: block;
	    width: 30rpx;
	    height: 6rpx;
	    margin-left: -5rpx;
	    background: #00cf97;
	    border-radius: 3rpx;
	    transform: scaleX(0);
	    opacity: 0;
	    transition: all .2s ease-out;
	}
	
	.place-order-car-service .tabs .item.item-1 {
	    position: relative;
	    padding-left: 20rpx;
	}
	
	.place-order-car-service .tabs .item.item-1 .free-tag {
	    position: absolute;
	    top: 0;
	    right: 0;
	    width: 86rpx;
	    height: 36rpx;
	}
	
	.place-order-car-service .tabs .item.item-2 {
	    padding-right: 20rpx;
	}
	
	.place-order-car-service .tabs .item.item-2 .line {
	    margin-left: -25rpx;
	}
	
	.place-order-car-service .tabs .item:active .text {
	    opacity: .6;
	}
	
	.place-order-car-service .tabs .divider {
	    display: block;
	    width: 80rpx;
	    height: 80rpx;
	    background: -webkit-gradient(linear,left top,left bottom,from(#f8fafe),to(#f1f4fa));
	    background: -webkit-linear-gradient(#f8fafe,#f1f4fa);
	    background: -o-linear-gradient(#f8fafe,#f1f4fa);
	    background: linear-gradient(#f8fafe,#f1f4fa);
	}
	
	.place-order-car-service .tabs .divider .bg {
	    width: 80rpx;
	    height: 80rpx;
	    background: url(https://cdn.atzuche.com/mini/bg-car-rent-type-tab.png);
	    background-size: 100% 100%;
	}
	
	.place-order-car-service .tabs .bottom {
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    height: 40rpx;
	    background: #f1f4fa;
	}
	
	.place-order-car-service .tabs .bottom .radius {
	    display: block;
	    width: 100%;
	    height: 100%;
	    background: #fff;
	}

	.place-order-car-service .header {
	    height: 120rpx;
	    padding: 32rpx 0 0 32rpx;
	    overflow: hidden;
	    font-weight: 700;
	    font-size: 30rpx;
	    background: #fff;
	    border-top-left-radius: 20rpx;
	    border-top-right-radius: 20rpx;
	}
	
	.place-order-car-service .inner {
	    position: relative;
	    z-index: 2;
	    display: block;
	    margin-top: -40rpx;
	    padding: 10rpx 32rpx;
	    background: #fff;
	    border-radius: 20rpx;
	}
	
	.place-order-car-service .inner .tips {
	    padding-top: 22rpx;
	}
	
	.place-order-car-service .inner .row {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	    min-height: 90rpx;
	    border-top: 1px solid rgba(60,60,90,.05);
	}
	
	.place-order-car-service .inner .row .label {
	    display: block;
	    font-size: 26rpx;
	}
	
	.place-order-car-service .inner .row .flex {
	    flex: 1;
	}
	
	.place-order-car-service .inner .row .desc {
	    display: block;
	    margin-right: 20rpx;
	    font-size: 22rpx;
	    opacity: .6;
	}
	
	.place-order-car-service .inner .row .none {
	    display: block;
	    font-size: 22rpx;
	    opacity: .6;
	}
	
	.place-order-car-service .inner .row .amount {
	    display: block;
	    font-size: 26rpx;
	}
	
	.place-order-car-service .inner .row .amount.red {
	    color: $price-color;
	}
	
	.place-order-car-service .inner .row .coupon-tips {
	    display: block;
	    padding: 10rpx;
	    color: $price-color;
	    font-size: 22rpx;
	    line-height: 1;
	    background: rgba(255,92,92,.05);
	    border-radius: 4rpx;
	}
	
	.place-order-car-service .inner .row .icon-quan,.place-order-car-service .z-s-d .hd {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
	}

	.place-order-car-service .inner .row .icon-quan {
		-ms-flex-pack: center;
		justify-content: center;
		width: 52rpx;
		height: 52rpx;
		margin-left: -13rpx;
		color: #fff;
		font-size: 36rpx;
		line-height: 1;
		background: $price-color;
		border-radius: 12rpx;
		transform: scale(.5);
	}

	.place-order-car-service .inner .row .icon-quan.free {
		background: var(--view-theme);
	}
	
	.place-order-car-service .inner .row.arrow {
	    padding-right: 30rpx;
	    background: url(../static/images/icon-arrow-right-black.png) right center no-repeat;
	    background-size: 30rpx auto;
	}
	
	.pop-title{
		background-color: #FFFFFF;
	}
	.pop-box{
		height: 660rpx;
		padding: 0rpx !important;
		background-color: #F0F1F6 !important;
	}
</style>
